<!-- 基础搜索组件。 -->
<template>
  <div class="wrap">
    <el-button @click="dialogVisible=!dialogVisible">点击按钮</el-button>
    <WDialog
      :visible="dialogVisible"
      @cancel="cancel"
      @confirm="confirm"
      @handleClose="handleClose">
      <!--      <div #>form表单</div>-->
      <div>
        <WForm
          :ref-obj.sync="formInfo.ref"
          :form-data="formInfo.formData"
          :field-list="formInfo.fieldList"
          :rules="formInfo.rules"
          :operator-list="formInfo.operatorList"
          :label-width="formInfo.labelWidth"
          :list-type-info="listTypeInfo"
          @handleClick="handleClick"
          @handleEvent="handleEvent"
        >
          <!-- 自定义插槽-选择头像 -->
          <template #form-avatar>
            <div class="slot-avatar">
              <!--          <img v-imgAlart :src="formInfo.formData.avatar" style="height: 30px;" />-->
              <img  :src="formInfo.formData.avatar" style="height: 30px;" />
              <el-button
                type="primary"
                icon="el-icon-picture"
                size="mini"
                @click="handleClick('selectFile')"
              >{{ formInfo.formData.avatar ? '更换头像' : '选择头像' }}</el-button>
            </div>
          </template>
        </WForm>
      </div>
    </WDialog>
  <div></div>
  </div>
</template>

<script>
  import WDialog from './components/dialog/src';
  export default {
    name: 'BaseSearch',
    props: {

    },
    components: {
      WDialog
    },

    created () {},

    mounted () {

    },
    data () {
      return {
        dialogVisible:false,
        formInfo: {
          ref: null,
          formData: {
            id: '', // *唯一ID
            account: '', // *用户账号
            password: '', // *用户密码
            name: '', // *用户昵称
            type: 2, // *用户类型: 0: 手机注册 1: 论坛注册 2: 管理平台添加
            sex: '', // *性别: 0:男 1:女
            hobby: [], // *爱好: 0:男 1:女
            avatar: '', // 头像
            phone: '', // 手机号码
            wechat: '', // 微信
            qq: '', // qq
            email: '', // 邮箱
            desc: '', // 描述
            status: [1], // *状态: 0：停用，1：启用(默认为1)',
            choosedate: "", // *状态: 0：停用，1：启用(默认为1)',
            choosedaterange:[],
            startTime:"",
            endTime:"",
            // test:""
          },
          fieldList: [
            { label: '账号', value: 'account', type: 'input' },
            { label: '密码', value: 'password', type: 'password' },
            { label: '昵称', value: 'name', type: 'input' },
            { label: '性别', value: 'sex', type: 'select', list: 'sexList' ,arrLabel:"key",arrKey:"value" ,multiple:false},
            { label: '爱好', value: 'hobby', type: 'checkbox', list: 'hobbyList' },
            { label: '头像', value: 'avatar', type: 'slot', className: 'el-form-block' },
            { label: '手机号码', value: 'phone', type: 'input' },
            { label: '微信', value: 'wechat', type: 'input' },
            { label: 'QQ', value: 'qq', type: 'input' },
            { label: '邮箱', value: 'email', type: 'input' },
            { label: '描述', value: 'desc', type: 'textarea', className: 'el-form-block' },
            { label: '状态', value: 'status', type: 'select', list: 'statusList' ,arrLabel:"label",arrKey:"value",multiple:true},
            { label: '选择日期', value: 'choosedate', type:"date", dateType: 'datetime' },
            { label: '选择日期段', value: 'choosedaterange', type:"daterange", dateType: 'datetimerange' },
            { label: '选择日期开始', value: 'startTime', type:"startTime", dateType: 'datetime' },
            { label: '选择日期结束', value: 'endTime', type:"endTime", dateType: 'datetime' },
            // { label: 'test', value: 'test', type: 'select-obj', list: 'testList' ,arrLabel:"label",arrKey:"value"}
          ],
          rules: {
            account: [
              { required: true, message: '请输入账号', trigger: 'blur' },
              // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            /*      password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                  ],
                  name: [
                    { required: true, message: '请输入昵称', trigger: 'blur' }
                  ],
                  phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' }
                  ],
                  sex: [
                    { required: true, message: '请选择性别', trigger: 'change' }
                  ],
                  hobby: [
                    { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }
                  ]*/
          },
          operatorList: [
          /*  { label: '提交', type: 'danger', fun: this.submitForm },
            { label: '重置', type: 'primary', fun: this.resetForm }*/
          ],
          labelWidth: '120px'
        },
        // 相关列表
        listTypeInfo: {
          hobbyList: [
            { label: '吉他', value: '0' },
            { label: '看书', value: '1' },
            { label: '美剧', value: '2' },
          ],
          sexList: [
            { key: '女', value: 1 },
            { key: '男', value: 0 },
            { key: '未知', value: -1 },
          ],
          accountTypeList: [
            { label: '手机用户', value: 0 },
            { label: '论坛用户', value: 1 },
            { label: '平台用户', value: 2 }
          ],
          statusList: [
            { label: '启用', value: 1 },
            { label: '停用', value: 0 },
            { label: '取消', value: -1 },

          ],
          /*   testList: {
               label: '启用',
               value: 1,
               label2: '停用',
               value2: 0,
               label3: '停用',
               value3: -1
             },*/
        }
      }
    },
    computed: {

    },
    watch: {

    },
    // 方法集合
    methods: {
      handleClick (event, data) {
        console.log(event, data)
      },
      // 触发事件
      handleEvent (event, data) {
        console.log(event, data)
      },
      // 提交form表单
      /*submitForm () {

      },*/
      // 重置form表单
    /*  resetForm () {
        Object.assign(this.$data.formInfo.formData, this.$options.data().formInfo.formData)
      },*/
      // 关闭对话框
      handleClose() {
        console.log("关闭对话框")
        this.dialogVisible = false
      },
      // 确认对话框
      confirm() {
        console.log("确认对话框")
        this.formInfo.ref.validate((valid) => {
          console.log( this.formInfo.formData)
          if (valid){
            console.log("验证通过")
            this.dialogVisible = false
            // console.log(77, this.formInfo.formData)
          }else {
            console.log("验证不通过")
            return
          }


        })


      },
      // 取消对话框
      cancel() {
        console.log("取消对话框")
        this.dialogVisible = false
      },
    },

    beforeDestroy () {

    }

  }
</script>
<style  scoped>

</style>
